<template>
  <div>
    <!--
      SecretId: AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8
      SecretKey: HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty
    -->
    <input type="file" @change="changeEvent">
    <!-- el-upload：
          action:上传地址（必传参数）
          http-request:自定义上传
          before-upload：上传前的回调（常用于限制上传文件大小与类型等）
          show-file-list：是否显示上传文件列表
     -->
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- 二次封装组件 -->
    <el-upload
      action="#"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      :show-file-list="false"
    >
      upload上传
      <img :src="imgUrl" alt="">
    </el-upload>
    <hr>

    <!-- 上传组件展示 -->
    <!-- <UploadImg :value="imgAddress" @input="imgAddress=$event" /> -->

    <!--
      v-model:值的双向绑定，它是一个语法糖
        props与emit
        <xxx :value="父组件属性" @input="父组件属性=$event" />
        <xxx v-model="父组件属性" />
        xxx.vue
          props:['value123'],
          model:{
            prop:'value123',
            event:'input123'
          },
          this.$emit('input123',实参值)
     -->
    <UploadImg v-model="imgAddress" />
    <Abc />
    <hr>
    <Test />
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
// import UploadImg from '@/components/lib/UploadImg.vue'
var cos = new COS({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  components: {
    // UploadImg
  },
  data() {
    return {
      imgUrl: '',
      // imgAddress: ''
      imgAddress: 'http://abc-1305249343.cos.ap-chongqing.myqcloud.com/94hr/1c2f813bbe7f22f575927fc7fe6c4281.png'
    }
  },
  methods: {
    changeEvent(e) {
      console.log('e', e.target.files[0])
      const file = e.target.files[0]
      cos.uploadFile({
        Bucket: 'abc-1305249343', /* 填写自己的 存储桶，必须字段 */
        Region: 'ap-chongqing', /* 存储桶所在地域，必须字段 */
        Key: '94hr/' + file.name, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file, // 上传文件对象
        SliceSize: 1024 * 1024 * 0.5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: function(progressData) {
          console.log(JSON.stringify(progressData))
        }
      }, function(err, data) {
        if (err) {
          console.log('上传失败', err)
        } else {
          console.log('上传成功', data)
        }
      })
    },
    beforeUpload(file) {
      // 限制类型：  1:通过文件名  2:通过type值
      console.log(file, 'file')
      const limitPng = file.type === 'image/png'
      if (!limitPng) {
        this.$message.error('请上传png')
      }
      return limitPng
      // return boolean值  true:正常上传  false:中止上传
    },
    httpRequest(res) {
      console.log(res)
      const file = res.file
      cos.uploadFile({
        Bucket: 'abc-1305249343', /* 填写自己的 存储桶，必须字段 */
        Region: 'ap-chongqing', /* 存储桶所在地域，必须字段 */
        Key: '94hr/' + file.name, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file, // 上传文件对象
        SliceSize: 1024 * 1024 * 0.5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        if (err) {
          console.log('上传失败', err)
        } else {
          console.log('上传成功', data)
          console.log('this.imgUrl', this.imgUrl)
          this.imgUrl = 'http://' + data.Location
        }
      })
    }
  }
}
</script>
<style>
</style>
